<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单页</title>
    <script type="text/javascript" src="../static/js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="../static/css/all.css"/>
    <link rel="stylesheet" href="../static/css/user.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/navigation.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/button_color.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/background.css" type="text/css"/>
    <style type="text/css">
        .order_div{
            width: 100%;
            height: auto;
            border: 0 solid black;
        }
        .order_tab{
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            border-collapse: collapse;
            border: none;
        }
        .order_tab thead th, .order_tab tbody tr td{
            padding-left: 10px;
            padding-right: 10px;
            border: 1px solid black;
        }
        /*页脚*/
        #tab_foot {
            text-align: center;
            border: none;
        }
        #tab_foot tr td {
            padding-top: 4px;
            padding-bottom: 4px;
            border: none;
        }
        #tab_foot tr td button{
            width: 100px;
            height: 30px;
            border: none;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body class="body">
<div class="menu">
    <span class="font_title">美食街</span>
    <span class="user"></span>
</div>
<div class="navigation">
    <ul class="navigationBar">
        <li><a href="/foodCity">浏览美食</a></li>
        <li><a href="/shoppingCart">购物车</a></li>
        <li><a href="/goOrder">我的订单</a></li>
        <li><a href="/info">我的</a></li>
    </ul>
</div>
<div class="order_div">
    <table class="order_tab" border="1">
        <thead>
            <th></th>
            <th>订单创建时间</th>
            <th>商品及数量</th>
            <th>总价</th>
            <th>支付状态</th>
            <th>备注</th>
            <th>操作</th>
        </thead>
        <tbody id="tab_body">
        </tbody>
        <tfoot id="tab_foot">
        </tfoot>
    </table>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/getUser",
            dataType: "json",
            success: function (rs) {
                if (rs.user != null) {
                    $(".user").append("欢迎你：" + rs.user.username + "，<a href='#' onclick='logout()'>注销</a>");
                } else {
                    //$(".user").append("<a href='#' onclick='showLogin()'>登录</a>查看更多内容");
                    alert("请先登录查看订单");
                    window.location = "/foodCity"
                }
            }
        });
        getPageBean(pageNo);
    })
    var pageNo = 1;
    var pageSize = 5;
    var pageCount;
    function getPageBean(pageNo) {
        $.ajax({
            url: "/addOrder",
            dataType: "json",
            method: "get",
            data: {
                "pageNo": pageNo,
                "pageSize": pageSize
            },
            success: function (rs) {
                $("#tab_body").empty();
                $("#tab_foot").empty();
                var state;
                var dataList = rs.pageBean.dataList;
                pageCount = rs.pageBean.pageCount;
                for (let i = 0; i < dataList.length; i++) {
                    state = + dataList[i].stateId === 1 ? "未支付" : "已支付";
                    var text = "<tr><td>" + (i + 1) + "</td><td>" + dataList[i].created + "</td><td>" + dataList[i].orders + "</td>" +
                        "<td>" + dataList[i].sumPrice + "元</td><td>" + state  + "</td><td>" + dataList[i].remark + "</td><td></td></tr>";
                    $("#tab_body").append(text);
                }
                text = "<tr><td colspan='7'>第" + rs.pageBean.pageNo +"/" + rs.pageBean.pageCount + "页,共" + rs.pageBean.dataCount + "条订单" + "</td></tr>" +
                    "<tr><td colspan='7'><button onclick='getPageBean(pageNo = 1);'>首页</button><button onclick='getPageBean(pageNo === 1 ? pageNo : pageNo = pageNo - 1)'>上一页</button><button onclick='getPageBean(pageNo < pageCount ? pageNo = pageNo + 1 : pageCount)'>下一页</button><button onclick='getPageBean(pageCount)'>尾页</button></td></tr>"
                $("#tab_foot").append(text);
            }
        });
    }
</script>
</html>